<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">

	<title>AnythingSlider Expanding Demo</title>
	<link rel="shortcut icon" href="demos/images/favicon.ico">
	<link rel="apple-touch-icon" href="demos/images/apple-touch-icon.png">

	<!-- jQuery (required) -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
	<script>window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')</script>

	<!-- Demo stuff -->
	<link rel="stylesheet" href="demos/css/page.css">

	<!-- Anything Slider -->
	<link rel="stylesheet" href="css/anythingslider.css">
	<script src="js/jquery.anythingslider.js"></script>
	<script>
	$(function () {
		$('#slider1').anythingSlider({
//			theme : 'metallic',
			expand       : true,
			autoPlay     : true
		});

		$('#slider2').anythingSlider({
			expand       : true,
			showMultiple : 2,
			changeBy     : 2
		});

		$('#slider3').anythingSlider({
			expand       : true,
			showMultiple : 1,
			changeBy     : 1
		});

		$('#slider4').anythingSlider({
			expand       : true,
			aspectRatio  : true,
			showMultiple : 1,
			changeBy     : 1
		});

		$('#slider5').anythingSlider({
			expand       : true,
			aspectRatio  : '680:317',
			showMultiple : 1,
			changeBy     : 1
		});

		$('#slider6').anythingSlider({
			expand       : true,
			aspectRatio  : 680/317,
			showMultiple : 1,
			changeBy     : 1
		});

		$('#slider7').anythingSlider({
			expand       : true,
			aspectRatio  : 1.5,
			showMultiple : 1,
			changeBy     : 1
		});

		$('#slider8').anythingSlider({
			expand       : true,
			aspectRatio  : 1.5,
			showMultiple : 2,
			changeBy     : 2
		});

	});
	</script>

</head>

<body id="expand">

	<!-- Links to other demo pages & docs -->
	<div id="nav">
		<a href="index.html">Main Demo</a>
		<a href="simple.html">Simple Demo</a>
		<a class="current" href="expand.html">Expand Demo</a>
		<a href="video.html">Video Demo</a>
		<a href="demos.html">FX Demos</a>
		<a href="css3.html">CSS3 Demo</a>
		<a class="play" href="http://jsfiddle.net/Mottie/ycUB6/">Playground</a>
		<a class="git" href="https://github.com/CSS-Tricks/AnythingSlider/wiki">Documentation</a>
		<a class="git" href="https://github.com/CSS-Tricks/AnythingSlider/zipball/master">Download</a>
		<a class="issue" href="https://github.com/CSS-Tricks/AnythingSlider/issues">Issues</a>
	</div>
	<!-- End Links -->

<h1>Expanding Slider Demo*</h1>
<h3>* Resize the browser window</h3>
<br>
<h2>Full page width</h2>

	<!-- Expanding AnythingSlider 100% width -->

<div id="wrapper1">
	<ul id="slider1">
		<li><img src="demos/images/slide-civil-1.jpg" alt=""></li>
		<li><img src="demos/images/slide-env-1.jpg" alt=""></li>
		<li><img src="demos/images/slide-civil-2.jpg" alt=""></li>
		<li><img src="demos/images/slide-env-2.jpg" alt=""></li>
	</ul>
</div>

	<!-- END AnythingSlider -->

<div class="spacer"></div>

<h2>Half page width with two images showing</h2>
	<!-- Expanding AnythingSlider 50% width -->

<div id="wrapper2">
	<ul id="slider2">
		<li><img src="demos/images/slide-tele-1.jpg" alt=""></li>
		<li><img src="demos/images/slide-tele-2.jpg" alt=""></li>
		<li><img src="demos/images/slide-env-1.jpg" alt=""></li>
		<li><img src="demos/images/slide-env-2.jpg" alt=""></li>
		<li><img src="demos/images/slide-civil-1.jpg" alt=""></li>
		<li><img src="demos/images/slide-civil-2.jpg" alt=""></li>
	</ul>
</div>

	<!-- END AnythingSlider -->

<!-- aspectRatio demos -->
<div class="spacer"></div>

<h2>3/4 page width with one image showing (expand : true)</h2>
	<!-- Expanding AnythingSlider 75% width -->
	<p>
		This AnythingSlider (with options: <code>expand : true</code>)
		will be eager and fill up the wrapper (the surronding div).
	</p>
	<p>
		So the content will scale incorrectly...
	</p>
	<p>
		Styling:
		<code>
			#wrapper3              { width: 75%; height: 500px; margin: 0 auto; border: solid red;    }
		</code>
		</p>

<div id="wrapper3">
	<ul id="slider3">
		<li><img src="demos/images/slide-tele-1.jpg" alt=""></li>
		<li><img src="demos/images/slide-tele-2.jpg" alt=""></li>
		<li><img src="demos/images/slide-env-1.jpg" alt=""></li>
		<li><img src="demos/images/slide-env-2.jpg" alt=""></li>
		<li><img src="demos/images/slide-civil-1.jpg" alt=""></li>
		<li><img src="demos/images/slide-civil-2.jpg" alt=""></li>
	</ul>
</div>

	<!-- END AnythingSlider -->


<div class="spacer"></div>

<h2>3/4 page width, one image (expand : true, aspectRatio  : true)</h2>
	<!-- Expanding AnythingSlider 75% width -->

	<p>
		This AnythingSlider
		(with options: <code>expand : true, aspectRatio : true</code>)
		will scale according to a calculated value for the aspect ratio.
			
		N.B. the "base"-dimensions, to calculate the aspect ratio from,
		must be explicitly given by
		e.g. css: <code>#slider4 { width: 680px; height: 317px; }</code>.
		
		In this case there will be space over in the height
		dimension if the window is kept small enough.
	</p>
	<p>
		Styling:
		<code>
			#wrapper4              { width: 75%; height: 500px; margin: 0 auto; border: solid green;  }
		</code>
	</p>

<div id="wrapper4">
	<ul id="slider4">
		<li><img src="demos/images/slide-tele-1.jpg" alt=""></li>
		<li><img src="demos/images/slide-tele-2.jpg" alt=""></li>
		<li><img src="demos/images/slide-env-1.jpg" alt=""></li>
		<li><img src="demos/images/slide-env-2.jpg" alt=""></li>
		<li><img src="demos/images/slide-civil-1.jpg" alt=""></li>
		<li><img src="demos/images/slide-civil-2.jpg" alt=""></li>
	</ul>
</div>

	<!-- END AnythingSlider -->


<div class="spacer"></div>

<h2>3/4 page width, one image (expand : true, aspectRatio : '680:317')</h2>
	<!-- Expanding AnythingSlider 75% width -->

	<p>
		This AnythingSlider
		(with options: <code>expand : true, aspectRatio : '680:317'</code>)
		will scale according to a calculated value from the aspect ratio.
		So the string '660:317' is parsed and calculated to a float =
		680/317.
		
		In this case there will be space over in the height
		dimension if the window is kept small enough.
	</p>
	<p>
		Styling:
		<code>
			#wrapper5	      { width: 75%; height: 500px; margin: 0 auto; border: solid green;  }
		</code>
	</p>

<div id="wrapper5">
	<ul id="slider5">
		<li><img src="demos/images/slide-tele-1.jpg" alt=""></li>
		<li><img src="demos/images/slide-tele-2.jpg" alt=""></li>
		<li><img src="demos/images/slide-env-1.jpg" alt=""></li>
		<li><img src="demos/images/slide-env-2.jpg" alt=""></li>
		<li><img src="demos/images/slide-civil-1.jpg" alt=""></li>
		<li><img src="demos/images/slide-civil-2.jpg" alt=""></li>
	</ul>
</div>

	<!-- END AnythingSlider -->


<div class="spacer"></div>

<h2>3/4 page width, one image (expand : true, aspectRatio : 680/317)</h2>
	<!-- Expanding AnythingSlider 75% width -->

	<p>
		This AnythingSlider
		(with options: <code>expand : true, aspectRatio : 680/317</code>)
		will scale according to the given float (680/317).
		
		In this case there will be space over in the height
		dimension if the window is kept small enough.
	</p>
	<p>
		Styling:
		<code>
			#wrapper6              { width: 75%; height: 500px; margin: 0 auto; border: solid green;  }
		</code>
	</p>

<div id="wrapper6">
	<ul id="slider6">
		<li><img src="demos/images/slide-tele-1.jpg" alt=""></li>
		<li><img src="demos/images/slide-tele-2.jpg" alt=""></li>
		<li><img src="demos/images/slide-env-1.jpg" alt=""></li>
		<li><img src="demos/images/slide-env-2.jpg" alt=""></li>
		<li><img src="demos/images/slide-civil-1.jpg" alt=""></li>
		<li><img src="demos/images/slide-civil-2.jpg" alt=""></li>
	</ul>
</div>

	<!-- END AnythingSlider -->


<div class="spacer"></div>

<h2>3/4 page width, one image (expand : true, aspectRatio : 1.5)</h2>
	<!-- Expanding AnythingSlider 75% width -->

	<p>
		This AnythingSlider
		(with options: <code>expand : true, aspectRatio : 1.5</code>)
		will scale according to the given float (1.5).
		
		In this case there will be space over in the width
		dimension if the window is kept wide enough.
	</p>
	<p>
		Styling:
		<code>
			#wrapper7              { width: 75%; height: 200px; margin: 0 auto; border: solid green;  }
		</code>
	</p>

<div id="wrapper7">
	<ul id="slider7">
		<li><img src="demos/images/slide-tele-1.jpg" alt=""></li>
		<li><img src="demos/images/slide-tele-2.jpg" alt=""></li>
		<li><img src="demos/images/slide-env-1.jpg" alt=""></li>
		<li><img src="demos/images/slide-env-2.jpg" alt=""></li>
		<li><img src="demos/images/slide-civil-1.jpg" alt=""></li>
		<li><img src="demos/images/slide-civil-2.jpg" alt=""></li>
	</ul>
</div>

	<!-- END AnythingSlider -->


<div class="spacer"></div>

<h2>3/4 page width, one image (expand : true, aspectRatio : 1.5, showMultiple : 2)</h2>
	<!-- Expanding AnythingSlider 75% width -->

	<p>
		This AnythingSlider
		(with options:
		<code>expand : true, aspectRatio : 1.5, showMultiple : 2</code>
		)
		will scale according to the given float (1.5) X showMultiple
		(1.5*2=3).
		
		In this case there will be space over in the width
		dimension if the window is kept wide enough.
	</p>
	<p>
		Styling:
		<code>
			#wrapper8              { width: 75%; height: 200px; margin: 0 auto; border: solid green;  }
		</code>
	</p>

<div id="wrapper8">
	<ul id="slider8">
		<li><img src="demos/images/slide-tele-1.jpg" alt=""></li>
		<li><img src="demos/images/slide-tele-2.jpg" alt=""></li>
		<li><img src="demos/images/slide-env-1.jpg" alt=""></li>
		<li><img src="demos/images/slide-env-2.jpg" alt=""></li>
		<li><img src="demos/images/slide-civil-1.jpg" alt=""></li>
		<li><img src="demos/images/slide-civil-2.jpg" alt=""></li>
	</ul>
</div>

	<!-- END AnythingSlider -->

	
</body>

</html>
